<template>
    <div class='router-div'>

      <div class="header_part">
      <h3>{{this.data.part}}  =  {{this.data.partTrans}}</h3>

        <div v-for="word in this.data.words" v-if="word.defaultPartWord">
          <hr>
          <h4>{{word.word}}</h4>
          <p>[{{word.wordExplain}}]</p>
          <p>{{word.wordTranslate}}</p>
        </div>
      </div>

      <div class="button_layout">
        <mt-button type="default" @click="prePart">上一个</mt-button>
        <mt-button type="default" @click="nextPart">下一个</mt-button>

      </div>
      <div v-for="word in this.data.words">
        <h4>{{word.word}}</h4>
        <p>[{{word.wordExplain}}]</p>
        <p>{{word.wordTranslate}}</p>
        <br>
        <div class="button_layout">
          <mt-switch v-model="word.defaultPartWord" v-on:change="updateDefaultWord(word)">默认记忆单词</mt-switch>
          <mt-button type="default" @click="addPart">添加</mt-button>
          <mt-button type="default" @click="connectPart(word)">关联</mt-button>
        </div>
        <hr>
        <br>
      </div>

      <br><br><br>
      <div v-for="word in this.data.extraWords">
        <h4>{{word.word}}</h4>
        <p>[{{word.wordExplain}}]</p>
        <p>{{word.wordTranslate}}</p>
        <br>
        <div class="button_layout">
          <mt-switch v-model="word.defaultPartWord" v-on:change="updateDefaultWord(word)">默认记忆单词</mt-switch>
          <mt-button type="default" @click="addPart">添加</mt-button>
          <mt-button type="default" @click="connectPart(word)">关联</mt-button>
        </div>
        <hr>
        <br>
      </div>

    </div>
</template>

<script>
  import common from "../../data/common"
  import {Button, Switch} from 'mint-ui';
  import configData from "../../../static/js/data"

  export default {
        name: "study-part",
        data() {
          return {
            currPage:0,
            index:0,
            data:"",
            partList:"",
          };
        },
        methods: {
          getData(){
            var url = common.apidomain + "/word/getPartDetail"
              + "?partId=" + this.partList.datas[this.index].id;
            this.$http.get(url).then(ret=>{
              this.data = ret.body.data;
            },ret=>{
              this.$message(ret.body.msg);
            })
          },
          getPartList(){
            var url = common.apidomain + "/admin/select"
              + "?tableName=part"
              +"&currPage=" + this.currPage
            this.$http.get(url).then(ret=>{
              this.partList = ret.body.data;
              this.getData();
            },ret=>{
              this.$message(ret.body.msg);
            })
          },
          updateDefaultWord(word) {
            var isDefault;
            if (word.default_part_word) {
              isDefault = 0;
            } else {
              isDefault = 1;
            }
            var url = common.apidomain + "/admin/update"
              + "?tableName=word&"
              + "id=" + word.id
              + "&default_part_word=" + isDefault;
            this.$http.get(url).then(ret=>{
            },ret=>{
              this.$message(ret.body.msg);
            })
          },
          prePart() {
            this.index--;
            if (this.index < 0) {
              this.index = 0;
            }
            this.getData();
          },
          nextPart() {
            this.index++;
            if (this.index >= this.partList.datas.length) {
              this.index = this.partList.datas.length -1;
            }
            this.getData();
          },
          addPart() {
            this.$router.push({path:"/sub/addItem", query:{config:configData.submitConfig[0]}});
          },

          connectPart(word) {
            this.$router.push({
              path:"/sub/addItem",
              query:{
                config:configData.submitConfig[2],
                transferData:[{name:"word_id", value:word.id}]
              }
            });
          },

        },
      created() {
          this.index = this.$route.query.index;
          this.currPage = this.$route.query.currPage;
          this.getPartList();
      }
    }
</script>

<style scoped>

  .header_part {
    min-height: 100pt;
    border: 1px solid gray;
    padding: 5pt;
    margin-bottom: 20pt;
  }
  hr {
    margin-bottom: 5pt;
    margin-top: 5pt;
  }
  p {
    margin-bottom: 5pt;
    margin-top: 5pt;
  }
  h4{
    margin-bottom: 5pt;
    margin-top: 5pt;
    color: blueviolet;
  }
  .button_layout {
    display:flex;
    justify-content: space-around;
  }
</style>
